<template>
	<div class="address-info" style="padding: 24px;">
		<el-descriptions :column="3" border>
			<el-descriptions-item label="收货人">{{ addressInfo.consignee || '-' }}</el-descriptions-item>
			<el-descriptions-item label="收货电话">{{ addressInfo.tel || '-' }}</el-descriptions-item>
			<el-descriptions-item label="收货手机">{{ addressInfo.phone || '-' }}</el-descriptions-item>
			<el-descriptions-item label="真实姓名">{{ addressInfo.realName || '-' }}</el-descriptions-item>
			<el-descriptions-item label="省市区">{{ addressInfo.addrBrief || '-' }}</el-descriptions-item>
			<el-descriptions-item label="邮编">{{ addressInfo.postcode || '-' }}</el-descriptions-item>
			<el-descriptions-item label="身份证">{{ addressInfo.idCard || '-' }}</el-descriptions-item>
			<el-descriptions-item label="收货地址" :span="3">{{ addressInfo.address || '-' }}</el-descriptions-item>
			<el-descriptions-item label="备注" :span="3">{{ addressInfo.remark || '-' }}</el-descriptions-item>
		</el-descriptions>
	</div>
</template>

<script>
import {
  getConsigneeInfo
} from "@/api/mes/sales/print";
export default {
	name: 'AddressInfo',
	props: {
		cellId: {
			type: String,
			default: ''
		},
	},
	data() {
		return {
			addressInfo: {
				consignee: '',
				tel: '',
				phone: '',
				realName: '',
				region: [],
				postcode: '',
				idCard: '',
				address: '',
				remark: ''
			},
			regionOptions: [] // 省市区下拉选项
		}
	},
	watch: {
		cellId: {
			handler( val) {
				if (val && val !== 'add') {
					this.loadAddressInfo();
				} else {
					this.tableData = [];
				}
			},
		}
	},
	methods: {
		// 加载地址信息
		loadAddressInfo() {
			getConsigneeInfo(this.cellId).then(response => {
				if(response.code === 200) {
					this.addressInfo = response.data;
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.address-info {
	background: #fff;
	 ::v-deep.el-descriptions-item__label {
        width: 80px;
      }
}
</style>
